<template>
  <laker-dialog
    v-model="visible"
    title="隐患排查绩效管理"
    width="900"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel primary">
          <div class="card-panel-icon-wrapper">
            <el-icon size="30"><el-icon-view /></el-icon>
          </div>
          <div class="card-panel-description">
            <el-statistic title="发现" :value="dataModel.atm01">
              <template #title>
                <div class="card-panel-text">发现（元）</div>
              </template>
            </el-statistic>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel success">
          <div class="card-panel-icon-wrapper">
            <el-icon size="30"><el-icon-operation /></el-icon>
          </div>
          <div class="card-panel-description">
            <el-statistic title="发现" :value="dataModel.atm02">
              <template #title>
                <div class="card-panel-text">整改（元）</div>
              </template>
            </el-statistic>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel warning">
          <div class="card-panel-icon-wrapper">
            <el-icon size="30"><el-icon-circle-check /></el-icon>
          </div>
          <div class="card-panel-description">
            <el-statistic title="发现" :value="dataModel.atm03">
              <template #title>
                <div class="card-panel-text">验收（元）</div>
              </template>
            </el-statistic>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel danger">
          <div class="card-panel-icon-wrapper">
            <el-icon size="30"><el-icon-histogram /></el-icon>
          </div>
          <div class="card-panel-description">
            <el-statistic title="总额" :value="dataModel.totalAtm">
              <template #title>
                <div class="card-panel-text">总额（元）</div>
              </template>
            </el-statistic>
          </div>
        </div>
      </el-col>
    </el-row>
    <table class="laker-table">
      <tr>
        <th>日期</th>
        <th>隐患内容</th>
        <th style="width: 80px">风险等级</th>
        <th style="width: 80px">奖励总金额</th>
        <th style="width: 80px">嘉奖部门</th>
        <th style="width: 80px" colspan="2">嘉奖分配</th>
      </tr>
      <template v-for="(item, index) in dataList" :key="index">
        <tr>
          <td rowspan="3">{{ item.bgbDate }}</td>
          <td rowspan="3">{{ item.bgbName }}</td>
          <td rowspan="3" :class="item.bgbLevel">{{ formatDict('bgbLevel', item.bgbLevel) }}</td>
          <td rowspan="3">{{ item.totalAtm }}</td>
          <td>{{ item.findCstName }}</td>
          <td>{{ item.findName }}</td>
          <td>{{ item.findAtm }}</td>
        </tr>
        <tr>
          <td>{{ item.dealCstName }}</td>
          <td>{{ item.dealName }}</td>
          <td>{{ item.dealAtm }}</td>
        </tr>
        <tr>
          <td>{{ item.checkCstName }}</td>
          <td>{{ item.checkName }}</td>
          <td>{{ item.checkAtm }}</td>
        </tr>
      </template>
    </table>
  </laker-dialog>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import { dayjs } from 'element-plus'
import dprevent from '@/api/dprevent'

export default {
  name: 'RiskTop10',
  components: { LakerDialog },
  emits: ['success', 'closed'],
  data() {
    let that = this
    return {
      dialog: {
        raDialog: false
      },
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      dataList: [],
      dictData: {
        bgbLevel: [
          { value: 'VH', label: '重大隐患' },
          { value: 'H', label: '较大隐患' },
          { value: 'N', label: '一般隐患' }
        ]
      },
      dataModel: {
        atm01: 100,
        atm02: 100,
        atm03: 100,
        totalAtm: 400
      }
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      dprevent.getHdRewardList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList = res.result
            this.dataModel = res
            this.dataModel.totalAtm = this.dataModel.atm01 + this.dataModel.atm02 + this.dataModel.atm03
          }
        }
      })
    },
    formatDict(column, cellValue) {
      const dictList = this.dictData[column]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value === cellValue) {
            label = element.label
          }
        })
      }
      return label
    },
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      console.log(this.visible)
      return this
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    },
    openDetail(item) {
      this.dialog.raDialog = true
      this.$nextTick(() => {
        this.$refs.raDialogRef.open('show').setData(item)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.panel-group {
  margin-top: 5px;

  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-panel {
    height: 108px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    color: #666;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 5px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: #ffffff;
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        color: #ffffff;
        font-size: 20px;
      }
    }
  }
}

.primary {
  background-color: var(--el-color-primary);
}
.success {
  background-color: var(--el-color-success);
}
.warning {
  background-color: var(--el-color-warning);
}
.danger {
  background-color: var(--el-color-danger);
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
